/*transition*/
// .page-in-appear {
//   transform: translate3D(100%, 0, 0);
//   transition: all 300ms linear;

//   &.page-in-appear-active {
//     transform: translate3D(0, 0, 0);
//   }
// }

// .page-in-enter {
//   transform: translate3D(100%, 0, 0);
//   transition: all 300ms linear;

//   &.page-in-enter-active {
//     transform: translate3D(0, 0, 0);
//   }
// }

// .page-in-leave {
//   position: absolute;
//   left: 0;
//   top: 0;
//   opacity: 1;
//   transform: translate3D(0, 0, 0);
//   transition: all 300ms linear;

//   &.page-in-leave-active {
//     opacity: 0.01;
//     transform: translate3D(-100%, 0, 0);
//   }
// }

#app {
  height: 100vh;
  overflow: hidden;
  background-color: #aaa;
  // ===forest===
  background-image: url(https://i.loli.net/2021/02/07/MvZcO4tpgsz9ruk.jpg);
  // ===black===
  // background-image: url(https://i.loli.net/2021/03/01/yfKhOR3nWzuBVMZ.jpg);
  // ===snow===
  // background-image: url(http://static.hinpc.com/images/wallpagers/snow_grass_w1440.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

// .page-enter {
//   opacity: 0;
//   transform: scale(1.1);
// }

// .page-enter-active {
//   opacity: 1;
//   transform: scale(1);
//   transition: opacity 300ms, transform 300ms;
// }

// .page-exit {
//   opacity: 1;
//   transform: scale(1);
// }

// .page-exit-active {
//   opacity: 0;
//   transform: scale(0.9);
//   transition: opacity 300ms, transform 300ms;
// }

.page-enter {
  transform: translate3D(100%, 0, 0);
}

.page-enter-active {
  transform: translate3D(0, 0, 0);
  transition: all 300ms linear;
}

.page-exit {
  transform: translate3D(0, 0, 0);
}

.page-exit-active {
  opacity: 0.01;
  transform: translate3D(-100%, 0, 0);
  transition: all 300ms linear;
}

.route-page.go-right {
  &.page-enter {
    transform: translate3D(-100%, 0, 0);
  }

  &.page-enter-active {
    transform: translate3D(0, 0, 0);
    transition: all 300ms linear;
  }

  &.page-exit {
    transform: translate3D(0, 0, 0);
  }

  &.page-exit-active {
    opacity: 0.01;
    transform: translate3D(100%, 0, 0);
    transition: all 300ms linear;
  }
}
